<template>
  <div>
    <text-edit-button @click="openDialog" :text="text || '自定义按钮'" />
    <drag-dialog v-if="customVisible" modal append-to-body v-model="customVisible" :close-on-click-modal="false" title="自定义按钮设置">
      <div style="margin-bottom: 4px">
        <span style="margin-right: 20px">效果预览</span>
        <custom-button v-bind="data" :clickBanned="true" />
      </div>
      <el-tabs>
        <el-tab-pane label="样式设置">
          <el-form label-width="100" class="custom-btn-setting">
            <el-form-item label="按钮名称">
              <el-input link v-model="data.buttonName" />
            </el-form-item>
            <el-form-item label="悬浮文本">
              <el-input link v-model="data.title" />
            </el-form-item>
            <el-form-item label="风格">
              <el-radio label="primary" v-model="data.styles.type">
                <el-button type="primary" @click="data.styles.type = 'primary'">风格</el-button>
              </el-radio>
              <el-radio label="default" v-model="data.styles.type">
                <el-button type="default" @click="data.styles.type = 'default'">风格</el-button>
              </el-radio>
            </el-form-item>
            <el-form-item label="样式">
              <span style="margin: 0 4px">文本样式：<el-switch v-model="data.styles.link" /></span>
              <span style="margin: 0 4px">圆形样式：<el-switch v-model="data.styles.circle" /></span>
              <span style="margin: 0 4px">圆角样式：<el-switch v-model="data.styles.round" /></span>
            </el-form-item>
            <el-form-item label="推荐颜色">
              <div :class="['color-item-box', data.styles.color == color ? 'selected-item' : '']" v-for="(color, index) in colors" :key="index" @click="handleColorClick(color)">
                <div v-if="color" class="color-item" :style="{ 'background-color': color }"></div>
                <span v-else class="color-item">无</span>
              </div>
              <span>
                自定义
                <el-color-picker v-model="data.styles.color" />
              </span>
            </el-form-item>
            <el-form-item label="悬浮颜色">
              <div :class="['color-item-box', data.styles.hoverColor == color ? 'selected-item' : '']" v-for="(color, index) in hoverColors" :key="index" @click="handleHoverColorClick(color)">
                <div v-if="color" class="color-item" :style="{ 'background-color': color }"></div>
                <span v-else class="color-item">无</span>
              </div>
              <span>
                自定义
                <el-color-picker v-model="data.styles.hoverColor" />
              </span>
            </el-form-item>
            <el-form-item label="通用图标">
              <icon-selector v-model="data.styles.icon" :icons="icons" />
            </el-form-item>
            <el-form-item label="业务图标" v-if="businessSvgList.length">
              <icon-selector v-model="data.styles.businessIcon" :icons="businessSvgList" :svg="true" />
            </el-form-item>
            <el-form-item label="文本大小">
              <el-input-number v-model="data.styles.fontSize" controls-position="right" />
            </el-form-item>
            <el-form-item label="文本颜色">
              <el-color-picker v-model="data.styles.textColor" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="动作设置">
          <el-form label-width="100" class="custom-btn-setting">
            <el-form-item label="执行动作">
              <el-select v-model="data.feature.type" style="width: 400px" @change="handleTypeChange">
                <el-option v-for="(opt, idx) in typeOptions" :key="idx" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="跳转方式" v-if="data.feature.type == 'link'">
              <el-select v-model="data.feature.linkWay" placeholder="请选择" style="width: 400px" clearable>
                <el-option v-for="(opt, idx) in linkWayOptions" :key="idx" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="选择模型" v-if="data.feature.type == 'ajaxModel'">
              <el-select v-model="data.feature.ajaxModel" clearable style="width: 400px" @change="generateUrlByAjaxModelApi">
                <el-option v-for="opt in ajaxModelList" :key="opt.tableName" :label="`${opt.description}(${opt.tableName})`" :value="opt.tableName" />
              </el-select>
            </el-form-item>
            <el-form-item label="选择方法" v-if="data.feature.type == 'ajaxModel'">
              <el-select v-model="data.feature.ajaxApi" clearable style="width: 400px" @change="generateUrlByAjaxModelApi">
                <el-option v-for="opt in ajaxApiList" :key="opt.dictValue" :label="`${opt.dictLabel}(${opt.dictValue})`" :value="opt.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="url" v-if="(data.feature.type == 'link' && data.feature.linkWay !== 'postBack') || data.feature.type.includes('ajax')">
              <el-input v-if="data.feature.type == 'link' || data.feature.type == 'ajaxLocal'" v-model="data.feature.url" placeholder="请输入url" style="width: 400px"> </el-input>
              <el-tag v-else-if="data.feature.type == 'ajaxModel'">{{ data.feature.url }}</el-tag>
              <api-selector v-else v-model="data.feature.url" />
            </el-form-item>
            <el-form-item label="请求方式" v-if="data.feature.type == 'ajaxLocal'">
              <el-radio-group v-model="data.feature.method">
                <el-radio-button label="POST" value="post" />
                <el-radio-button label="GET" value="get" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="请求体类型" v-if="data.feature.type == 'ajaxLocal'">
              <el-radio-group v-model="data.feature.contentType">
                <el-radio-button label="FormData" value="formData" />
                <el-radio-button label="RawJSON" value="rawJson" />
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="携带参数" v-if="data.feature.type == 'link' && data.feature.linkWay !== 'back' && data.feature.linkWay !== 'postBack'">
              <el-input v-model="data.feature.query" placeholder="请输入动态参数,多个以逗号分隔" style="width: 400px" />
            </el-form-item> -->
            <el-form-item label="参数设置">
              <el-tag>{{ paramsSettedTag }}</el-tag>
              <text-edit-button text="编辑参数" @click="showParamsSetting = true" />
            </el-form-item>
            <el-form-item label="执行前钩子">
              <el-select v-model="data.feature.hookBefore" style="width: 400px" clearable>
                <el-option v-for="opt in getPageFuncs()" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
              </el-select>
            </el-form-item>
            <el-form-item label="调用" v-if="data.feature.type == 'comp'">
              <comp-call-config v-model="data.feature.components" :fields="fields" :options="options" />
            </el-form-item>
            <template v-if="data.feature.type.includes('ajax')">
              <el-form-item label="请求头">
                <anvil-dynamic v-model="data.feature.params.headers" :children="option.children" />
              </el-form-item>
              <el-form-item label="执行后钩子">
                <el-select v-model="data.feature.hookAfter" style="width: 400px" clearable>
                  <el-option v-for="opt in getPageFuncs()" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
                </el-select>
              </el-form-item>
              <el-form-item label="文件流下载">
                <el-switch v-model="data.feature.download" />
              </el-form-item>
              <el-form-item label="成功后回调">
                <el-switch v-model="data.feature.isCallback"></el-switch>
                <comp-call-config v-if="data.feature.isCallback" v-model="data.feature.callback" :fields="fields" :options="options" />
              </el-form-item>
              <el-form-item label="失败后回调">
                <el-switch v-model="data.feature.isFailCallback" @change="handleFailCallbackSwitch"></el-switch>
                <comp-call-config v-if="data.feature.isFailCallback" v-model="data.feature.failCallback" :fields="fields" :options="options" />
              </el-form-item>
              <el-form-item label="关闭遮罩层">
                <el-switch v-model="data.feature.noLoading"></el-switch>
              </el-form-item>
              <el-form-item label="接口返回信息">
                <el-switch v-model="data.feature.showMsg"></el-switch>
              </el-form-item>
            </template>
            <template v-if="data.feature.type == 'wfStart'">
              <el-form-item label="选择模型">
                <el-select v-model="data.feature.modelName" clearable filterable style="width: 400px">
                  <el-option v-for="opt in tableList" :key="opt.dictValue" :label="`${opt.dictLabel}(${opt.dictValue})`" :value="opt.dictValue" />
                </el-select>
              </el-form-item>
              <el-form-item label="选择流程">
                <el-select v-model="data.feature.wfCode" clearable filterable style="width: 400px">
                  <el-option v-for="opt in modelList" :key="opt.dictValue" :label="`${opt.dictLabel}(${opt.dictValue})`" :value="opt.dictValue" />
                </el-select>
              </el-form-item>
              <el-form-item label="选择流程主键">
                <el-cascader :props="CascaderProps" :options="attrList" v-model="data.feature.businessKey" placeholder="请选择属性" filterable clearable :show-all-levels="false" style="width: 400px">
                  <template #default="{ data: item }">
                    <span>{{ `${item.entityDesc}(${item.entityName})` }}</span>
                  </template>
                </el-cascader>
              </el-form-item>
              <el-form-item label="选择处理人">
                <el-switch v-model="data.feature.isSelectAssignee"></el-switch>
              </el-form-item>
              <el-form-item label="完成第一步">
                <el-switch v-model="data.feature.completeFirst"></el-switch>
              </el-form-item>
              <!-- <el-form-item label="执行前钩子">
                <el-select v-model="data.feature.hookBefore" style="width: 400px" clearable>
                  <el-option v-for="opt in getPageFuncs()" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
                </el-select>
              </el-form-item> -->
              <el-form-item label="成功后回调">
                <el-switch v-model="data.feature.isCallback"></el-switch>
                <comp-call-config v-if="data.feature.isCallback" v-model="data.feature.callback" :fields="fields" :options="options" />
              </el-form-item>
            </template>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="其他设置">
          <el-form label-width="130" class="custom-btn-setting">
            <el-form-item label="表单校验">
              <el-switch v-model="data.validate" active-text="开启" inactive-text="关闭"></el-switch>
            </el-form-item>
            <el-form-item label="校验规则选择" v-if="data.validate">
              <el-select v-model="data.validateRules" multiple clearable filterable placeholder="请选择触发数据校验规则" style="width: 600px">
                <el-option v-for="rule in getValidateRules()" :key="rule.uuid" :label="rule.name" :value="rule.uuid" />
              </el-select>
            </el-form-item>
            <el-form-item label="校验失败提示" v-if="data.validate">
              <el-switch v-model="data.validateShowFail" active-text="开启" inactive-text="关闭"></el-switch>
            </el-form-item>
            <el-form-item label="失败提示文本" v-if="data.validate && data.validateShowFail">
              <el-input v-model="data.validateFailText" placeholder="默认提示校验失败" style="width: 600px" />
            </el-form-item>
            <el-form-item label="二次确认">
              <el-switch v-model="data.confirm" active-text="开启" inactive-text="关闭"></el-switch>
            </el-form-item>
            <el-form-item label="确认文本" v-if="data.confirm">
              <el-input v-model="data.confirmSetting.text" placeholder="请输入确认文本" style="width: 600px" />
            </el-form-item>
            <el-form-item label="确认图标" v-if="data.confirm">
              <icon-selector v-model="data.confirmSetting.icon" :icons="icons" />
            </el-form-item>
            <el-form-item label="业务图标" v-if="data.confirm && businessSvgList.length">
              <icon-selector v-model="data.confirmSetting.businessIcon" :icons="businessSvgList" :svg="true" />
            </el-form-item>
            <el-form-item label="图标颜色" v-if="data.confirm">
              <el-color-picker v-model="data.confirmSetting.iconColor" />
            </el-form-item>
            <el-form-item label="图标大小" v-if="data.confirm">
              <el-input-number v-model="data.confirmSetting.iconSize" controls-position="right" />
            </el-form-item>
            <el-form-item label="表单字段控制显隐">
              <el-switch v-model="data.isShowByRules" active-text="开启" inactive-text="关闭" @change="handleIsShowSwitch"></el-switch>
              <display-rule-item v-if="data.isShowByRules" v-model="data.displayRules" :fields="getControlFields()" />
              <!-- <div class="condition-item-box" v-if="data.isShowByField">
                字段<el-select v-model="data.showByField.field" style="width: 200px" clearable>
                  <el-option v-for="field in getControlFields()" :key="field.prop" :label="field.fieldName" :value="field.prop"></el-option>
                </el-select>
                <el-select v-model="data.showByField.condition" style="width: 100px" clearable
                  ><el-option v-for="opt in condiOptions" :label="opt.label" :value="opt.value" :key="opt.value" />
                </el-select>
                <el-input
                  v-if="data.showByField.condition !== 'empty' && data.showByField.condition !== '!empty'"
                  v-model="data.showByField.value"
                  placeholder="请输入匹配值"
                  style="width: 200px"
                />时显示
              </div> -->
            </el-form-item>
            <el-form-item label="权限字符串配置">
              <el-switch v-model="data.usePerm" active-text="开启" inactive-text="关闭" @change="handlePermSwitch"></el-switch>
              <avue-array v-if="data.usePerm" v-model="data.permission" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <params-setting v-if="showParamsSetting" v-model="showParamsSetting" :data="data.feature" :fields="fields" :options="options" @submit="handleParamsSubmit" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确认</el-button>
        </span>
      </template>
    </drag-dialog>
  </div>
</template>
<script>
import { useAnvilCodeStore } from '@code/components/anvil-code-low-common/store/modules/code';
import { getModelEntityTreeByids } from '@uni/api/uni/entity/info';
import { searchAllMda } from '@uni/api/uni/mda/table/info';
import btnConfig from './customButtonAttr';
import paramsSetting from '../../../components/paramsSetting.vue';
import displayRuleItem from '../../../components/displayRule/displayRuleItem.vue';
import { cloneDeep } from 'lodash-es';
import { findCompByType } from '@code/components/anvil-code-low-common/utils/common-methods';
import icons from './icons';
import iconSelector from '../../../components/iconSelector.vue';

const importAll = (r) => {
  let cache = {};
  for (let k in r) {
    const arr = k.split('/');
    const name = arr[arr.length - 1].replace('.svg', '');
    cache[name] = r[k];
  }
  return cache;
};

// 获取业务图标列表
const BusinessSvgs = importAll(import.meta.glob('@/assets/businesssvgs/*.svg'));

export default {
  components: { paramsSetting, displayRuleItem, iconSelector },
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => {}
    },
    // 是否在列表页配置，不同页面配置项不同
    listSetting: {
      type: Boolean,
      default: false
    },
    // 自定义配置按钮名称
    text: {
      type: String,
      default: ''
    },
    formModelDataFromDesign: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      paramsSettedTag: '',
      businessSvgList: ['', ...Object.keys(BusinessSvgs)],
      customVisible: false,
      data: {},
      rules: {
        position: [
          {
            required: true,
            message: '请选择展示位置',
            trigger: 'change'
          }
        ],
        'feature.type': [
          {
            required: true,
            message: '请选择按钮功能',
            trigger: 'change'
          }
        ]
      },
      colors: [
        '',
        '#4b90c8',
        '#2cb43f',
        '#fd8300',
        '#f13300',
        'rgb(250, 129, 24)',
        'rgb(240, 168, 0)',
        'rgb(214, 197, 4)',
        'rgb(162, 194, 4)',
        'rgb(106, 199, 60)',
        'rgb(70, 194, 111)',
        'rgb(0, 184, 153)',
        'rgb(0, 174, 209)',
        'rgb(47, 125, 235)',
        'rgb(88, 101, 245)',
        'rgb(126, 71, 235)',
        'rgb(198, 67, 224)',
        'rgb(217, 65, 192)',
        'rgb(240, 67, 125)'
      ],
      hoverColors: ['', '#00489e', '#128f22', '#e55500', '#dd0000'],
      icons: ['', ...icons],
      curColor: '',
      curIcon: '',
      option: {
        children: {
          align: 'center',
          headerAlign: 'center',
          column: [
            {
              type: 'input',
              prop: 'key',
              label: 'key'
            },
            {
              type: 'input',
              prop: 'value',
              label: 'value'
            }
          ]
        },
        dynamicType: 'table',
        dynamicModel: 'common',
        widget: true
      },
      fieldDicts: [],
      typeOptions: [
        {
          label: '页面跳转',
          value: 'link'
        },
        {
          label: '注册接口调用',
          value: 'ajax'
        },
        {
          label: '模型接口调用',
          value: 'ajaxModel'
        },
        {
          label: '本地接口调用',
          value: 'ajaxLocal'
        },
        {
          label: '组件调用',
          value: 'comp'
        },
        // {
        //   label: '下载',
        //   value: 'download'
        // },
        {
          label: '流程发起',
          value: 'wfStart'
        }
      ],
      linkWayOptions: [
        {
          label: '页内跳转',
          value: 'in'
        },
        {
          label: '外链',
          value: 'out'
        },
        {
          label: '返回上一页',
          value: 'back'
        },
        {
          label: '打开主页面',
          value: 'postMsg'
        },
        {
          label: '返回主页面',
          value: 'postBack'
        }
      ],
      tableList: null, // 流程模型接口管理列表
      modelList: null, // 流程部署管理列表
      attrList: [],
      CascaderProps: {
        value: 'entityName',
        label: 'entityDescName',
        children: 'childList',
        emitPath: false
      },
      ajaxModelList: [], // 接口模型列表
      ajaxApiList: [], // 接口api列表
      showParamsSetting: false
    };
  },
  computed: {
    fields() {
      return this.getCallableCompList(this.options);
    },
    baseUrl() {
      return import.meta.env.VITE_APP_BASE_API;
    }
  },
  watch: {
    value: {
      handler(newVal) {},
      deep: true,
      immediate: true
    },
    fields: {
      handler(val) {
        // this.compOption.children.column[1].dicData = [...val]
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    openDialog() {
      this.init();
      this.customVisible = true;
      this.getParamsSettedTag();
      this.handleSettingInit(this.data.feature.type);
    },
    handleColorClick(color) {
      this.data.styles.color = color;
      // this.$set(this.data.styles, "color", color);
    },
    handleIconClick(icon) {
      this.data.styles.icon = icon;
      this.data.styles.businessIcon = '';
      // this.$set(this.data.styles, "icon", icon);
    },
    handleBusinessIconClick(icon) {
      this.data.styles.icon = '';
      this.data.styles.businessIcon = icon;
    },
    addCondition() {
      if (!this.data.condition.conditions.length) {
        this.data.condition.conditions = [
          {
            prop: '',
            operator: 'EQ',
            value: ''
          }
        ];
      } else {
        this.data.condition.conditions.push({
          prop: '',
          operator: 'EQ',
          value: ''
        });
      }
    },
    removeCondition(index) {
      this.data.condition.conditions.splice(index, 1);
    },
    cancel() {
      this.customVisible = false;
    },
    submit() {
      if (this.value) {
        for (let key in this.data) {
          // eslint-disable-next-line vue/no-mutating-props
          this.value[key] = this.data[key];
          // this.$set(this.value, key, this.data[key]);
        }
      }
      this.$emit('submit', this.data);
      this.customVisible = false;
    },
    init() {
      // 对老数据的初始化
      if (this.value && Object.keys(this.value).length) {
        this.data = cloneDeep(this.value);
      } else {
        this.data = cloneDeep(btnConfig);
      }
    },
    // 获取可以用来控制按钮显隐的字段，包含表格字段和行内字段
    getControlFields() {
      return [...this.fields, ...this.getBrotherFields()];
    },
    // 当按钮处于表格内时寻找同一个父下的其他同级组件，并且打上标记【row.】作为前缀
    getBrotherFields() {
      const { parentName } = this.data;
      const parent = cloneDeep(this.fields.find((f) => f.prop == parentName));
      console.log('parent', parent);
      if (parent) {
        return parent.children.column.map((col) => {
          col.prop = 'row.' + col.prop;
          col.fieldName = col.fieldName + '(列表内字段)';
          return col;
        });
      } else {
        return [];
      }
    },
    handleHoverColorClick(color) {
      this.data.styles.hoverColor = color;
    },
    handleTypeChange(value) {
      this.data.feature.url = '';
      if (value == 'ajaxLocal') {
        this.data.feature.url = this.baseUrl;
        this.data.feature.method = 'post';
        this.data.feature.contentType = 'formData';
      }
      this.handleSettingInit(value);
    },
    handleSettingInit(value) {
      if (value == 'wfStart' && (!this.tableList || this.modelList)) {
        this.searchTable();
        this.searchModel();
        this.getAttrsByEntity();
      } else if (value == 'ajaxModel') {
        this.searchAjaxModel();
        this.searchAjaxApi();
        this.generateUrlByAjaxModelApi();
      }
    },
    searchTable() {
      this.getDicts('mda_table_info_list').then((response) => {
        this.tableList = response.data;
      });
    },
    searchModel() {
      this.getDicts('code_wf_deployment_list').then((response) => {
        this.modelList = response.data;
      });
    },
    // 根据实体获取字段列表
    getAttrsByEntity() {
      this.attrList = [];
      const { pageModelId } = this.formModelDataFromDesign;
      const ids = pageModelId.join(',');
      return getModelEntityTreeByids(ids).then((res) => {
        if (res.code == '200') {
          this.attrList = res.data;
          this.appendDescName(this.attrList);
        }
      });
    },
    appendDescName(list) {
      list.forEach((item) => {
        item.entityDescName = `${item.entityDesc}(${item.entityName})`;
        if (item.childList && item.childList.length > 0) {
          this.appendDescName(item.childList);
        }
      });
    },
    searchAjaxModel() {
      return searchAllMda({ isEnable: 'Y' }).then((res) => {
        this.ajaxModelList = res.data;
      });
    },
    searchAjaxApi() {
      this.getDicts('uni_mda_rest').then((response) => {
        this.ajaxApiList = response.data;
      });
    },
    generateUrlByAjaxModelApi() {
      this.data.feature.url = `/uni/mda/${this.data.feature.ajaxModel}/${this.data.feature.ajaxApi}`;
    },
    getPageFuncs() {
      return this.options.funcs ?? [];
    },
    // 同时获取主表单和子表单的校验规则列表
    getValidateRules() {
      const rules = [];
      if (this.options.validateRules && this.options.validateRules.length) {
        rules.push(...this.options.validateRules);
      }
      // 寻找子表单组件的校验规则
      const dynamics = [];
      findCompByType(dynamics, 'anvilDynamic', this.options.column);
      if (dynamics.length) {
        dynamics.map((d) => {
          if (d.children && d.children.validateRules) {
            // 在加入列表之前加上当前子表单的前缀标记
            const dynamicRules = d.children.validateRules.map((r) => {
              return {
                ...r,
                uuid: `anvilDynamic_${d.uuid}_${r.uuid}`,
                name: `${r.name}(来源于子表单<${d.fieldName}>)`
              };
            });
            rules.push(...dynamicRules);
          }
        });
      }
      return rules;
    },
    // 老数据兼容性处理
    handleFailCallbackSwitch(v) {
      if (v && !this.data.feature.failCallback) {
        this.data.feature.failCallback = [];
      }
    },
    // 老数据兼容性处理
    handleIsShowSwitch(v) {
      if (v && !this.data.displayRules) {
        this.data.displayRules = [
          {
            logicalRelation: 'and',
            isGroup: true,
            root: true,
            children: []
          }
        ];
      }
    },
    // 老数据兼容性处理
    handlePermSwitch(v) {
      if (v && !this.data.permission) {
        this.data.permission = [];
      }
    },
    handleParamsSubmit(data) {
      for (let key in data) {
        this.data.feature[key] = data[key];
      }
      this.getParamsSettedTag();
    },
    getParamsSettedTag() {
      this.paramsSettedTag = this.isParamsSetted();
    },
    isParamsSetted() {
      if (this.data.feature && Object.keys(this.data.feature).length) {
        const { contantParams, compParams, withFormData } = this.data.feature;
        const strArr = [];
        if (contantParams && contantParams.length) {
          strArr.push('常量参数');
        }
        if (compParams && compParams.length) {
          strArr.push('组件参数');
        }
        if (withFormData) {
          strArr.push('表单数据');
        }

        return strArr.length ? strArr.join(',') : '未设置';
      } else {
        return '未设置';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-styles {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
}

.custom-btn-setting {
  height: 600px;
  overflow: auto;

  .color-item-box {
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 24px;
    margin: 3px 2px;
    position: relative;
    vertical-align: middle;
    width: 24px;

    .color-item {
      border-radius: 50%;
      height: 20px;
      line-height: 20px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      text-align: center;
    }

    &:hover {
      border-color: #99e3d6;
    }
  }

  .icon-item {
    border: 1px solid transparent;
    align-items: center;
    border-radius: 3px;
    color: #525967;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    height: 24px;
    justify-content: center;
    margin: 2px;
    text-align: center;
    width: 24px;
  }

  .selected-item {
    border-color: #00b899;
  }

  .condition-type {
    color: rgb(36, 173, 162);
    border-color: rgb(36, 173, 162);
    margin-top: 10px;
  }
}

.condition-item-box {
  > div {
    &:first-child {
      width: 100px;
    }
  }

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 8px 0;

  .icon {
    cursor: pointer;
    font-size: 16px;
    color: red;
  }
}
</style>
